<template>
  <!-- 列表 -->
  <ContentWrap>
    <el-table
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="true"
      highlight-current-row
      border
    >
      <el-table-column label="编号" align="center" prop="id" v-if="false" />
      <el-table-column label="任务状态" align="center" prop="assignStatus" width="90px">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PI_BILL_STATUS" :value="scope.row.assignStatus" />
        </template>
      </el-table-column>
      <el-table-column label="任务名称" align="center" prop="title" width="200px" />
      <el-table-column label="巡检区域" align="center" prop="patrolPname" width="90px" />
      <el-table-column label="房产编号" align="center" prop="houseId" v-if="false" />
      <el-table-column label="房产名称" align="center" prop="houseName" width="90px" />
      <el-table-column label="巡检项编号" align="center" prop="patrolId" v-if="false" />
      <el-table-column label="巡检项" align="center" prop="patrolName" />
      <el-table-column label="巡检结果" align="center" prop="patrolResult" width="120px">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PI_PATROL_RESULT" :value="scope.row.patrolResult" />
        </template>
      </el-table-column>
      <el-table-column label="巡检人" align="center" prop="inspector" v-if="false" />
      <el-table-column label="巡检人" align="center" prop="inspectorName" />
      <el-table-column
        label="巡检开始日期"
        align="center"
        prop="inspectStartdate"
        :formatter="dateFormatter"
        width="180px"
      />
      <el-table-column
        label="巡检实际结束日期"
        align="center"
        prop="inspectActualdate"
        :formatter="dateFormatter"
        width="180px"
      />
      el-table-column label="巡检结束日期" align="center" prop="inspectEnddate"
      :formatter="dateFormatter" width="180px" />
      <el-table-column label="异常定位一" align="center" prop="location1" v-if="false" />
      <el-table-column label="异常定位一" align="center" prop="location1Name" width="100px" />
      <el-table-column label="异常定位二" align="center" prop="location2" v-if="false" />
      <el-table-column label="异常定位二" align="center" prop="location2Name" width="100px" />
      <el-table-column label="异常描述" align="center" prop="description" v-if="false" />
      <el-table-column label="异常描述" align="center" prop="descriptionName" width="150" />
      <el-table-column label="异常描述补充" align="center" prop="descriptionExtra" width="150" />
      <el-table-column label="异常图片" align="center" prop="fileUrls" width="300px">
        <template #default="scope">
          <el-image
            v-for="(url, index) in scope.row.fileUrls"
            :key="index"
            :src="url"
            :initial-index="index"
            preview-teleported
            :preview-src-list="scope.row.fileUrls"
            :url-list="scope.row.fileUrls"
            show-progress
            class="h-40px max-w-40px mr-0.5"
          />
        </template>
      </el-table-column>
      <el-table-column label="区域打卡图片" align="center" prop="areaFileUrls" width="300px">
        <template #default="scope">
          <el-image
            v-for="(url, index) in scope.row.areaFileUrls"
            :key="index"
            :src="url"
            :initial-index="index"
            preview-teleported
            :preview-src-list="scope.row.areaFileUrls"
            :url-list="scope.row.areaFileUrls"
            show-progress
            class="h-40px max-w-40px mr-0.5"
          />
        </template>
      </el-table-column>
      <el-table-column label="处理方法" align="center" prop="processMethod" v-if="false" />
      <el-table-column label="处理方式" align="center" prop="processMethod" width="150px">
        <template #default="scope">
          <dict-tag :type="DICT_TYPE.PI_PROCESS_METHOD" :value="scope.row.processMethod" />
        </template>
      </el-table-column>
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        width="180px"
      />
    </el-table>
  </ContentWrap>
</template>
<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import { AssignmentApi } from '@/api/pi/assignment'
import { DICT_TYPE } from '@/utils/dict'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const props = defineProps<{
  jobId?: number // 巡检单编号（主表的关联字段）
}>()
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    list.value = await AssignmentApi.getAssignmentDetailListByJobId(props.jobId)
  } finally {
    loading.value = false
  }
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
